<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蒙家辉</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <h1>Enter Your Information</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="firstName:">
                        <el-input v-model="form.firstName"></el-input>
                    </el-form-item>
                    <el-form-item label="lastName:">
                        <el-input v-model="form.lastName"></el-input>
                    </el-form-item>
                    <el-form-item label="address:">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="city:">
                        <el-input v-model="form.city"></el-input>
                    </el-form-item>
                    <el-form-item label="States:">
                        <el-select v-model="form.state">
                            <el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Zip">
                        <el-input-number v-model="form.zip" controls-position="right" @change="handleChange" :min="0" 
                            ></el-input-number>
                            (输入数字无效)
                    </el-form-item>
                    <el-row>
                        <el-col :offset="4">
                            <el-button type="primary">Order Submit</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :offset="12">
                            <p>First Name:<span>{{form.firstName}}</span></p>
                            <p>Last Name:<span>{{form.lastName}}</span></p>
                            <p>Address:<span>{{form.address}}</span></p>
                            <p>City:<span>{{form.city}}</span></p>
                            <p>State:<span>{{form.state}}</span></p>
                            <p>Zip:<span>{{form.zip}}</span></p>
                        </el-col>
                    </el-row>

                </el-col>
            </el-row>
        </el-form>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    /**
     * @Author MengJiahui
     * @Date 5-12 
     */
    const app = new Vue({
        el: '#app',
        data: {
            form: {
                lastName: "",
                firstName: "",
                Address: "",
                city: "",
                zip: null,
                state: ""
            },
            states: [
                {
                    value: '',
                    label: 'State',
                    disabled: true
                }, {
                    value: 'Beijing',
                    label: '北京'
                }, {
                    value: 'Shanghai',
                    label: '上海'
                }, {
                    value: 'Guangdong',
                    label: '广东'
                }, {
                    value: 'Hebei',
                    label: '河北'
                }
            ]
        },
        methods: {
            handleChange() {

            }
        },
    })
</script>

</html>